import React from 'react'
import { Button, NavBar, Tabs } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { LoopOutline } from 'antd-mobile-icons'
const Index = () => {
    let nav = useNavigate()
    const from = useSelector((store) => store.counter.from)
    const to = useSelector((store) => store.counter.to)
    return (
        <div>
            {/* 头部 */}
            <div>
                <NavBar onBack={() => nav(-1)}>订票</NavBar>
            </div>
            {/* tabs */}
            <div>
                <Tabs>
                    <Tabs.Tab title='机票' key='fruits'>
                        <div className='box1'>
                            <Tabs>
                                <Tabs.Tab title='单程' key='a'>
                                    <div style={{ fontSize: '25px', textAlign: 'center',height:'6vh',lineHeight:'6vh' }}>
                                        <span onClick={()=>nav('/city?type=from')}>{from}</span><span><LoopOutline /></span><span onClick={()=>nav('/city?type=to')}>{to}</span>
                                    </div>
                                    <hr />
                                    <div style={{height:'6vh',lineHeight:'6vh'}}>时间</div>
                                    <hr />
                                    <div style={{height:'6vh',lineHeight:'6vh'}}>
                                        <span>经济/公务/头等舱</span>
                                    </div>
                                    <hr />
                                    <div style={{height:'6vh',marginTop:'10px'}}>
                                        <Button style={{background:'orange',color:'#fff',
                                            width:'100%'
                                        }}>开始搜索</Button>
                                    </div>
                                </Tabs.Tab>
                                <Tabs.Tab title='往返' key='b'>
                                    往返
                                </Tabs.Tab>
                                <Tabs.Tab title='多程' key='c'>
                                    多程
                                </Tabs.Tab>
                                <Tabs.Tab title='特价票' key='d'>
                                    特价票
                                </Tabs.Tab>
                            </Tabs>
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab title='火车票' key='vegetables'>
                        火车票
                    </Tabs.Tab>
                    <Tabs.Tab title='汽车票' key='animals'>
                        汽车票
                    </Tabs.Tab>
                    <Tabs.Tab title='船票' key='anima'>
                        船票
                    </Tabs.Tab>
                </Tabs>
            </div>
        </div>
    )
}

export default Index
